Amazon Pinpointでアプリ内メッセージングチャネルを使ってメッセージを送信する

#Amazon Pinpoint

#AWS

いわさ

2021.12.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

いわさです。

先月、Amazon Pinpointでアプリ内メッセージ用のチャネルが追加されていました。
Pinpointでアプリ内メッセージを送信する記事がまだ無かったので紹介したいと思います。

エンドポイントなどの概念やテンプレートが他のチャネルと全く違うので本日はメッセージ送信を行って、確認するところまで行ってみました。

アプリ内メッセージとは

ECサイト訪問時に、過去の閲覧履歴や購入履歴に応じて、関連性の高いプロモーションがサイト内のポップアップメッセージで表示されたことはないでしょうか。これらはアプリ内メッセージです。
アプリ内メッセージを使用すると、アプリケーションのユーザーにターゲットを絞ったメッセージを送信することが出来ます。

アプリ内メッセージの特徴としては、他のPinpointメッセージチャネルと異なり、アプリケーション側からPinpointへメッセージ取得リクエストを送信する、プル型になっています。
また、アプリケーションはAPIを通して取得した情報を元にレンダリングを担う必要があります。ヘッドレスCMSを使うイメージに近いでしょうか。

そういった特徴から他のチャネルよりも、様々な設定値やカスタム属性などを含んだデータをアプリケーションへ伝えることが出来ます。
ボタンや、ボタンを押した時の遷移先も定義でき、カスタム属性を使ってアプリ側で振る舞い部分を実装すれば何でも出来ます。

Pinpointからアプリ内メッセージを送信する方法

メッセージ送信方法としては、通常どおりセグメントを用意し、キャンペーンから送信を行う形となります。
流れについては以下の記事を参照してください。

セグメントを用意

今回は静的セグメントを構築します。
ChannelTypeにIN_APPを指定します。

ChannelType,Address,User.UserId
IN_APP,hogehoge,user1

テンプレートの作成

この後の流れとしてはキャンペーンのチャネルでアプリ内メッセージングを指定します。
メッセージ内容はキャンペーンの詳細画面で設定することも出来ますし、事前にテンプレート機能で用意することも出来ます。

設定画面のカスタム出来る範囲が広いのでテンプレートを使ってみたいと思います。
通常のメッセージテンプレート作成画面からチャネルでアプリ内メッセージングを指定します。

モバイル・タブレット・Webブラウザの３つのサイズでプレビュー表示できますが、あくまでも参考程度に留めてください。
受け取ったメッセージデータをどういうUIで表示するかはアプリケーションに依存しています。

アプリ側で利用可能なUI構築用のパラメータをPinpoint側から伝えることが出来ます。

レイアウト
- トップバナー
- ボトムバナー
- ミドルバナー
- 全画面表示
- モーダル
- カルーセル

カルーセルレイアウトを選択した場合のみ少し特殊で、最大5つまでメッセージデータを設定することが出来るようになります。
名前のとおりアプリケーション側でカルーセルビューを使って表示するためのものです。

他、以下の標準情報を設定することが出来ます。

メッセージのデザイン
- ヘッダーテキスト、文字色、配置（左・中央・右）
- メッセージ本文テキスト、文字色、配置
- 背景色
- メッセージアイコン（画像URLで指定）
- ボタンを0~2個まで設定出来る
- 　ボタンテキスト、文字色、背景色、角丸
- 押下時用のアクションパラメータ（閉じる、URLに移動、ディープリンクなど）

ボタンの動作については、プラットフォーム（Android, iOS, ウェブ）毎の仕様を吸収出来るように、プラットフォーム毎の個別設定をすることも可能です。

上記の標準情報に加えて、カスタムデータを最大10件まで設定することが可能です。
設定値はキーバリュー型で指定します。
もちろんカスタムデータをどのように使うかはアプリケーション次第です。

かなり自由度が高い使い方が出来そうですね。

キャンペーンから送信

さて、テンプレートを作成できたらキャンペーンから送信してみます。
今回はキャンペーンからのテスト送信まで行っています。

テスト用セグメントを指定します。エンドポイントIDも指定可能です。

アプリ内メッセージを受信する方法

アプリ側ではPinpoint APIのGetInAppMessagesを使ってメッセージを取得します。
今回は、AWS CLIでget-in-app-messagesをコールしました。

取得するために、アプリケーションIDとエンドポイントIDが必要です。

アプリIDはPinpointプロジェクトIDです。

エンドポイントIDはセグメントインポート時にユーザー毎に割り当てられています。
セグメントのエンドポイント一覧を取得(get-user-endpoints)することで確認します。
今回はセグメントのエクスポート機能でCSVをダウンロードし確認しました。

Id,ChannelType,Address,EndpointStatus,OptOut,EffectiveDate,User.UserId
oyxsendnghlrtglmtfh4fndxdzo,IN_APP,hogehoge,ACTIVE,NONE,2021-12-15T21:16:11.076Z,user1

メッセージ取得

[cloudshell-user@ip-10-0-188-83 ~]$ aws pinpoint get-in-app-messages --application-id 25ef1a361de44e76aeb6162e1b638313 --endpoint-id oyxsendnghlrtglmtfh4fndxdzo
{
    "InAppMessagesResponse": {
        "InAppMessageCampaigns": [
            {
                "CampaignId": "e9efc5e6e8f54f31ad5b8cb2fe4def3e",
                "DailyCap": 0,
                "InAppMessage": {
                    "Content": [
                        {
                            "BackgroundColor": "#b6ffb8",
                            "BodyConfig": {
                                "Alignment": "LEFT",
                                "Body": "メッセージ１\nメッセージ２",
                                "TextColor": "#360deb"
                            },
                            "HeaderConfig": {
                                "Alignment": "LEFT",
                                "Header": "ヘッダー",
                                "TextColor": "#ff6363"
                            },
                            "ImageUrl": "https://classmethod.jp/favicon.ico",
                            "PrimaryBtn": {
                                "DefaultConfig": {
                                    "BackgroundColor": "#746363",
                                    "BorderRadius": 100,
                                    "ButtonAction": "CLOSE",
                                    "Text": "ボタン１",
                                    "TextColor": "#fffcfc"
                                }
                            },
                            "SecondaryBtn": {
                                "DefaultConfig": {
                                    "BackgroundColor": "#E8E8E8",
                                    "BorderRadius": 5,
                                    "ButtonAction": "LINK",
                                    "Link": "https://classmethod.jp/",
                                    "Text": "ボタン２",
                                    "TextColor": "#000000"
                                }
                            }
                        }
                    ],
                    "Layout": "TOP_BANNER"
                },
                "Priority": 2,
                "Schedule": {
                    "EndDate": "2021-12-15T21:48:02Z",
                    "EventFilter": {
                        "Dimensions": {
                            "Attributes": {},
                            "EventType": {
                                "DimensionType": "INCLUSIVE",
                                "Values": [
                                    "_session.start"
                                ]
                            },
                            "Metrics": {}
                        }
                    }
                },
                "SessionCap": 0,
                "TotalCap": 0,
                "TreatmentId": "0"
            }
        ]
    }
}

Pinpoint側で送信した情報を取得することが出来ました。
この情報を使ってアプリケーション側はメッセージのユーザーインターフェースをレンダリングする必要があります。
レンダリングに必要な情報まではPinpointが提示してくれるので、アプリ側でどう表示するかはおまかせという感じですね。

なお、受信データを確認してみるとテンプレートで構成した情報に加えて、キャンペーン終了日時なども付与されるので、キャンペーンのスケジュールにあわせて表示タイミングのコントロールが出来ますね。アプリ側でキャンペーンの期間が終了しているかどうかを気にせずにEndDateだけで判断すれば良い感じです。
メッセージ表示に関するビジネスロジックはPinpointにおまかせして、アプリケーションはレンダリング部分に集中することが出来ますね。

他にも追加の情報が多く含まれています。受信したメッセージ構造の詳細は以下を参照してください。

Understanding GetInAppMessages API responses - Amazon Pinpoint